@import '~@alife/aisc-core/purple/scss/index.scss';
.rule-card-wrapper {
  border-top: 1px solid $gray-03;
  &:first-child {
    border-top: none;
  }
}
.rule-card {
  background: $color-white;
  border-radius: 4px;
  overflow: hidden;
  &-detail-tag {
    cursor: pointer;
    background: $gray-03;
    color: $gray-06;
    border-radius: 2px;
    padding: 1px 3px;
  }
  &-header {
    display: flex;
    align-items: center;
    background: #f3fafd;
    padding: 5px 12px;
    &.has-border {
      border-bottom: 1px solid $gray-03;
    }
    &.no-border {
      border-bottom: none;
    }
    &-left {
      flex: auto;
      display: flex;
      flex-direction: column;
      &-top {
        display: flex;
        font-size: 14px;
        align-items: center;
      }
      &-bottom {
        display: flex;
        align-items: center;
        padding-left: 38px;
      }
      // &-tag {
      // margin-top: -2px;
      // }
    }
    &-time {
      color: $gray-06;
      font-size: 12px;
      margin-left: 4px;
    }
    &-yundou {
      height: 28px;
      width: auto;
      margin-right: 15px;
    }
    &-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: none;
    }
    &-tag {
      &-major {
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        letter-spacing: 0;
        width: 59px;
        border-radius: 20px;
        background-color: #006cfa !important;
      }
      &-critical {
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        letter-spacing: 0;
        width: 59px;
        border-radius: 20px;
        background-color: #fa8c15 !important;
      }
      &-blocker {
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        letter-spacing: 0;
        width: 59px;
        border-radius: 20px;
        background-color: #e62412 !important;
      }
    }
    &-name {
      margin-right: 6px;
      font-size: 14px;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      text-align: left;
      line-height: 20px;
      color: #333;
      // width: 350px;
      // height: 20px;
    }
  }
  &-body {
    padding: 0 20px;
    background: $color-white;
    &-des {
      margin-top: 10px;
      text-align: left;
      line-height: 20px;
      font-size: 14px;
      color: #595959;
    }
    &-label {
      margin-top: 10px;
      text-align: left;
      line-height: 20px;
      font-size: 14px;
      color: #a6a6a6;
      .plugin-label {
        margin-left: 24px;
      }
    }
    &-title {
      margin-top: 18px;
      text-align: left;
      line-height: 20px;
      font-weight: bold;
      font-size: 14px;
      color: #262626;
    }
    &-content {
      margin-top: 8px;
      text-align: left;
      line-height: 20px;
      font-size: 14px;
      color: #595959;
    }
  }
}

// 双栏时

// @media screen and (max-width: 1440px) {
//   td[colspan='2'] .rule-card-header-name {
//     width: 200px;
//   }
// }

// @media screen and (max-width: 1280px) {
//   td[colspan='2'] .rule-card-header-name {
//     width: 150px;
//   }
// }

// @media screen and (max-width: 1162px) {
//   td[colspan='2'] .rule-card-header-name {
//     width: 100px;
//   }
// }

.rule-comment-container.border-top {
  border-top: 1px solid $gray-03;
}
